<template>
  <!-- 拨款页面 -->
  <div class="add-container">
    <el-form
      class="add-panel"
      ref="form"
      :model="appropriation"
       :rules="rulesAppropriation"
      :inline="true"
    >
      <el-form-item
        class="form-item"
        prop="fileList"
        label="拨款证明及附件:"
        required
      >
          <el-upload
            class="form-img"
            style="margin-left: -1px; text-align: left"
            action="https://jsonplaceholder.typicode.com/posts/"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            multiple
            :limit="3"
            :on-exceed="handleExceed"
            :file-list="appropriation.fileList"
            accept=".png, .jpg, .doc,.docx"
            :on-success="uploadImg"
            :before-upload="beforeAvatarUpload"
          >
            <div>
              <img
                class="icon-add"
                style="width: 110px; height: 110px;border:1px dashed #e4e4e4 "
                src="../../../../static/img/addImg.png"
              />
            </div>
          </el-upload>
      </el-form-item>
      <el-form-item style="margin-left:10%" class="form-item" prop="appropriation" label="拨款金额:">
        <el-input v-model="appropriation.appropriation"></el-input>
      </el-form-item>
      <el-form-item style="margin-left:5%" class="add-btn">
        <el-button type="primary" @click="onSubmit"> 提交 </el-button>
      </el-form-item>
    </el-form>
    <el-divider content-position="left">拨款详情</el-divider>
    <el-form
      class="add-panel"
      :model="appropriation"
    >
    <el-row :gutter="20">
      <el-col :span="8">
        <el-form-item label-width="85px" class="form-item" prop="name" label="业主名称:" required>
          <el-input v-model="appropriation.name" disabled></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label-width="85px" class="form-item" prop="amount" label="请款金额:" required>
        <el-input v-model="appropriation.amount" disabled></el-input>
      </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label-width="85px" class="form-item" prop="date" label="请款时间:" required>
        <el-date-picker
          type="date"
          placeholder="选择日期"
          v-model="appropriation.date"
          style="width: 100%"
          disabled
        ></el-date-picker>
      </el-form-item>
      </el-col>
    </el-row>
      <el-form-item label="请款说明:" class="form-item">
        <br>
        <quill-editor
          class="editor"
          ref="myTextEditor"
          v-model="appropriation.notes"
          :options="editorOption"
          disabled
          @change="onEditorChange($event)"
        >
        </quill-editor>
        <!-- <tinymce :height="300" v-model="appropriation.notes" contenteditable="false"/> -->
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import Tinymce from '@/components/Tinymce'
import { updatePayment, getPaymenById } from "@/api/payment";
export default {
  components:{Tinymce},
  data() {
    return {
      fileList: [],
      content: null,
      editorOption: {
        modules: {
          toolbar: [
            ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线
            ["blockquote", "code-block"], // 引用  代码块
            [{ header: 1 }, { header: 2 }], // 1、2 级标题
            [{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表
            [{ script: "sub" }, { script: "super" }], // 上标/下标
            [{ indent: "-1" }, { indent: "+1" }], // 缩进
            // [{'direction': 'rtl'}],                         // 文本方向
            [{ size: ["small", false, "large", "huge"] }], // 字体大小
            // [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
            // [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
            // [{ font: [] }], // 字体种类
            [{ align: [] }], // 对齐方式
            ["clean"], // 清除文本格式
            ["link", "image"], // 链接、图片、视频
          ], //工具菜单栏配置
        },
        placeholder: "请在这里添加请款说明", //提示
        readyOnly: false, //是否只读
        theme: "snow", //主题 snow/bubble
        syntax: true, //语法检测
      },
      message: "",
      appropriation: {
        fileList: [
          //   {
          //   name: "food.jpeg",
          //   url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
          // },
          // {
          //   name: "food3332.jpeg",
          //   url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
          // },
        ],
        appropriation: "", //拨款
        name: "", //业主名称
        amount: "", // 请款金额
        date: "", // 请款时间
        notes: "", // 请款说明
      },
      rulesAppropriation: {
        appropriation: [
          {
            required: true,
            message: "请输入拨款金额",
            trigger: "change",
          },
        ],
        image: [
          {
            required: true,
            message: "请上传拨款证明及附件",
            trigger: "change",
          },
        ],
      },
    };
  },
  created() {
    const id = this.$route.query.id;
    getPaymenById(id).then((res) => {
      this.appropriation.name = res.data.data.ownerName;
      this.appropriation.amount = res.data.data.amount;
      this.appropriation.date = res.data.data.updateTime;
      this.appropriation.notes = res.data.data.notes;
      this.appropriation.id = res.data.data.id;
      this.appropriation.sentAmount = res.data.data.sentAmount;
    });
    // console.log(data)
  },
  methods: {
    checkAddPay(data) {
      if (!data.image) {
        // console.log("请上传拨款证明及附件");
        this.message = "请上传拨款证明及附件";
        return false;
      } else if (!data.appropriation) {
        this.message = "请输入拨款金额";
        return false;
      } else {
        this.message = "";
        // console.log("都不为空")
        return true;
      }
    },
    onSubmit() {
      // console.log("提交信息")
      this.$confirm("是否确认拨款", "拨款", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "none",
      })
        .then(() => {
          // if (this.checkAddPay(this.appropriation))
          {
            // console.log("提交");
            const data = {
              id: this.appropriation.id,
              status: 1,
              sentAmount: this.appropriation.appropriation,
              remainingAmount:
                this.appropriation.amount - this.appropriation.appropriation,
            };
            updatePayment(data).then((res) => {
              // console.log(res);
              this.$message({
                type: "success",
                message: "拨款成功！",
              });
              this.$router.push({ path: "quickFiling" });
            });
          }
          // else {
          //   if (this.message) this.$message.error(this.message);
          //   // console.log("信息填写出错")
          // }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消拨款",
          });
        });
    },
    uploadImg(res, file) {
      // this.appropriation.image = URL.createObjectURL(file.raw);
      console.log(file);
    },
    beforeAvatarUpload(file) {
      //   const isJPG = file.type === "image/jpeg";
      //   const isLt2M = file.size / 1024 / 1024 < 2;
      //   if (!isJPG) {
      //     this.$message.error("上传头像图片只能是 JPG 格式!");
      //   }
      //   if (!isLt2M) {
      //     this.$message.error("上传头像图片大小不能超过 2MB!");
      //   }
      //   return isJPG && isLt2M;
    },
    onEditorChange(editor) {
      this.content = editor.html;
      console.log(editor);
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
  },
};
</script>

<style lang="scss" scoped>
.add-container{
  background-color: white;
}
// html,
// body,
// #app {
//   height: 100%;
// }

// .home {
//   min-height: 100%;
//   width: 100%;
//   min-width: 750px;
//   background-color: #eeeeee;
// }

// .title {
//   text-align: left;
//   /* width: 100%; */
//   padding-left: 20px;
//   border: solid 1px #e4e4e4;
//   height: 55px;
//   line-height: 20px;
//   background-color: #f3f3f3;
//   color: #999999;
//   padding-top: 20px;
//   padding-left: 20%;
//   font-size: 13px;
// }

// .title p {
//   height: 20px;
//   margin: 0;
//   padding-left: 5px;
//   border-left: solid 3px #1abc9c;
// }

// .row {
//   display: flex;
//   flex-direction: row;
// }

// .main {
//   margin-top: 20px;
//   // width: 1100px;
//   width: 100%;
//   border: solid 1px #e4e4e4;
//   padding-top: 0;
//   padding-bottom: 20px;
//   /* width: 80%; */
//   margin-left: 20%;
//   height: 100%;
//   text-align: center;
// }

// .main-title {
//   height: 50px;
//   text-align: left;
//   padding-left: 20px;
//   font-size: 13px;
//   line-height: 50px;
// }

// .main-body {
//   border: solid 1px #e4e4e4;
//   min-height: 150px;
//   background-color: #ffffff;
//   padding-top: 10px;
//   padding-left: 10px;
// }

// .sub-btn {
//   margin-left: 22%;
//   background-color: #1abc9c;
//   color: #ffffff;
//   width: 80px;
//   height: 38px;
// }

// .form-item {
//   min-height: 50px;
//   line-height: 50px;
// }

// .body-form {
//   text-align: left;
// }

// .form-item .el-input {
//   width: 220px;
//   margin-top: 10px;
//   border-radius: 0;
// }

// .form-item .el-input__inner {
//   border-radius: 0;
// }
// .form-img {
//   width: 180px;
//   min-height: 130px;
//   margin-right: 42px;
//   text-align: center;
//   // border: solid 1px #e4e4e4;
// }

// .form-img .icon-add {
//   border: solid 1px #e4e4e4;
//   padding: 10px;
//   margin-top: 10px;
//   margin-left: 20px;
// }
.ql-snow .ql-picker.ql-size .ql-picker-label::before,
.ql-snow .ql-picker.ql-size .ql-picker-item::before {
    content: '14px';
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=small]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]::before {
    content: '10px';
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=large]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]::before {
    content: '18px';
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=huge]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]::before {
    content: '32px';
}

.ql-editor {
    min-height: 300px;
}

.ql-toolbar.ql-snow .ql-formats {
    margin-right: 0;
}

.ql-snow .ql-picker.ql-size {
    width: 65px;
}
</style>